<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./bootstrap.css">
</head>

<body>
    <div style='padding: 10px 30px'>
        <!-- 评论面板 -->
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">发表评论</h3>
            </div>
            <form class="panel-body" id="formAddCmt">
                <div>评论人：</div>
                <input type="text" class="form-control" name="username" autocomplete="off" />
                <div>评论内容：</div>
                <textarea class="form-control" name="content"></textarea>
                <button type="submit" class="btn btn-primary">发表评论</button>
            </form>
        </div>
        <!-- 评论列表 -->
        <ul class="list-group" id="cmt-list">
            <!-- <li class="list-group-item">
        <span class="badge" style="background-color: #F0AD4E;">评论时间：</span>
        <span class="badge" style="background-color: #5BC0DE;">评论人：</span>
        Item 1
      </li> -->
        </ul>
    </div>
    <script type="text/javascript" src="./jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function() {
            // 加载评论列表数据
            function loadCommentList() {
                $.get('http://www.liulongbin.top:3006/api/cmtlist', function(res) {
                    if (res.status === 200) {
                        // 获取服务器评论列表
                        var list = res.data
                            // 渲染评论列表
                        var commonts = []
                        list.forEach(function(item) {
                                // ctag表示其中一条评论
                                var ctag = `
                <li class="list-group-item">
                  <span class="badge" style="background-color: #F0AD4E;">评论时间：${item.time}</span>
                  <span class="badge" style="background-color: #5BC0DE;">评论人：${item.username}</span>
                  ${item.content}
                </li>
              `
                                commonts.push(ctag)
                            })
                            // 把列表内容追加到页面
                        $('#cmt-list').html(commonts.join(''))
                    }
                })
            }
            loadCommentList()
                // 发表评论
            $('#formAddCmt').submit(function(e) {
                // 阻止表单的默认提交行为
                e.preventDefault()
                    // 获取表单数据
                var formData = $(this).serialize()
                    // 调用接口发表评论
                $.post('http://www.liulongbin.top:3006/api/addcmt', formData, function(res) {
                    if (res.status === 201) {
                        // 发表评论称,刷新评论列表
                        loadCommentList()
                    }
                })

                console.log('submit')
            })
        })
    </script>
</body>

</html>